package cn.edu.baiyunu.myapplication.ui.home

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ChevronRight
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.ExperimentalTextApi
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.edu.baiyunu.myapplication.data.model.PhotoSpec
import cn.edu.baiyunu.myapplication.ui.components.SpecItem
import coil.compose.AsyncImage
import coil.request.ImageRequest


/**
 * 规格部分组件 - 按照原型图样式重新设计
 */
@OptIn(ExperimentalTextApi::class)
@Composable
fun SpecsSection(
    specs: List<PhotoSpec>,
    onSeeAllClick: () -> Unit,
    onSpecClick: (PhotoSpec) -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        colors = CardDefaults.cardColors(
            containerColor = Color.White
        ),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 2.dp,
            pressedElevation = 0.dp
        ),
        shape = RoundedCornerShape(24.dp),
    ) {
        Column(
            modifier = Modifier.padding(24.dp)
        ) {
            // 标题和"查看更多"按钮
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                // 使用文字渐变效果
                Text(
                    text = "热门规格",
                    style = TextStyle(
                        brush = Brush.horizontalGradient(
                            colors = listOf(
                                Color(0xFF4F46E5),
                                Color(0xFF7E22CE)
                            )
                        ),
                        fontSize = MaterialTheme.typography.titleLarge.fontSize,
                        fontWeight = FontWeight.SemiBold
                    )
                )
                
                TextButton(
                    onClick = onSeeAllClick
                ) {
                    Text(
                        text = "查看更多",
                        style = MaterialTheme.typography.bodySmall,
                        color = Color(0xFF4F46E5),
                        fontSize = 12.sp
                    )
                    Icon(
                        imageVector = Icons.Default.ChevronRight,
                        contentDescription = null,
                        tint = Color(0xFF4F46E5),
                        modifier = Modifier.size(16.dp)
                    )
                }
            }
            
            // 规格网格布局
            LazyVerticalGrid(
                columns = GridCells.Fixed(3),
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .padding(top = 16.dp)
                    .height(240.dp), // 增加高度确保内容完全显示
            ) {
                items(specs) { spec ->
                    SpecItemGlass(
                        photoSpec = spec,
                        onClick = { onSpecClick(spec) }
                    )
                }
            }
        }
    }
}

/**
 * 玻璃效果规格项组件
 */
@Composable
private fun SpecItemGlass(
    photoSpec: PhotoSpec,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .padding(6.dp)
            // 使用轻微阴影效果，更接近原型图中的glass-dark样式
            .shadow(
                elevation = 2.dp,
                shape = RoundedCornerShape(16.dp),
                ambientColor = Color.Black.copy(alpha = 0.03f),
                spotColor = Color.Black.copy(alpha = 0.05f)
            )
            .clip(RoundedCornerShape(16.dp))
            .background(Color.White)
            .clickable(onClick = onClick)
            .padding(12.dp)
    ) {
        // 示例图片 - 使用与原型图一致的浅色渐变背景
        Box(
            modifier = Modifier
                .size(64.dp)
                .aspectRatio(4f / 5f)
                .clip(RoundedCornerShape(8.dp))
                // 更轻微的阴影效果
                .shadow(
                    elevation = 1.dp,
                    shape = RoundedCornerShape(8.dp),
                    ambientColor = Color.Black.copy(alpha = 0.02f),
                    spotColor = Color.Black.copy(alpha = 0.03f)
                )
                .background(
                    Brush.verticalGradient(
                        colors = when (photoSpec.name) {
                            "一寸照" -> listOf(Color(0xFF6366F1), Color(0xFFA5B4FC)) // indigo-500 to indigo-300
                            "二寸照" -> listOf(Color(0xFF8B5CF6), Color(0xFFC4B5FD)) // violet-500 to violet-300
                            "小二寸" -> listOf(Color(0xFFF43F5E), Color(0xFFFDA4AF)) // rose-500 to rose-300
                            "小一寸" -> listOf(Color(0xFF0EA5E9), Color(0xFF7DD3FC)) // sky-500 to sky-300
                            "护照照" -> listOf(Color(0xFFF59E0B), Color(0xFFFCD34D)) // amber-500 to amber-300
                            "签证照" -> listOf(Color(0xFFEC4899), Color(0xFFF9A8D4)) // pink-500 to pink-300
                            else -> listOf(Color(0xFF8B5CF6), Color(0xFFC4B5FD)) // violet-500 to violet-300
                        }
                    )
                ),
            contentAlignment = Alignment.Center
        ) {
            Icon(
                imageVector = Icons.Default.Person,
                contentDescription = null,
                tint = Color.White,
                modifier = Modifier.size(32.dp)
            )
        }
        
        // 规格名称
        Text(
            text = photoSpec.name,
            style = MaterialTheme.typography.bodyMedium,
            fontWeight = FontWeight.Medium,
            textAlign = TextAlign.Center,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            color = Color(0xFF334155),  // slate-700
            modifier = Modifier.padding(top = 8.dp)
        )
        
        // 规格尺寸
        Text(
            text = photoSpec.description,
            style = MaterialTheme.typography.bodySmall,
            fontSize = 10.sp,
            textAlign = TextAlign.Center,
            color = Color(0xFF64748B),  // slate-500
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}